<template>
    <ex-dialog width="50%" class="ex-diolog" :title="title" :visible="visible" :close-on-click-modal="false"
      @closeDialog="handleClose">
      <div class="main" v-loading="loading" style="position: relative;">
        <el-form :model="ruleForm" ref="ruleForm" class="demo-ruleForm" >
            <el-form-item label="分类名称" :label-width="labelWidth" required>
              <el-input v-model="ruleForm.name" placeholder="请输入分类名称" maxlength="20"></el-input>
            </el-form-item>
            <el-form-item label="分类图标" :label-width="labelWidth" required>
              <ImageUploadMore :limit="1" :fileSize="20" @successImg="getPictureList" :value="ruleForm.img" ></ImageUploadMore>
            </el-form-item>
            <el-form-item label="排序" :label-width="labelWidth" required>
              <el-input v-model="ruleForm.sort" placeholder="请输入排序"  type='number'  ></el-input>
            </el-form-item>
        </el-form>
      </div>
      <div class="button_box">
        <el-button type="primary" :loading="AgreeLoading" @click="submitForm" >保存提交</el-button>
        <el-button @click="handleClose">取消</el-button>
      </div>
    </ex-dialog>
  </template>
  <script>

    import Loading from "@/components/Loading/index";
    import WangEditor from '@/components/WangEditor'
    // api
    import { questionTypeInfo,addQuestionType,updateQuestionType } from "@/api/setting/problemConfiguration";
    export default {
      name: 'BeeTokenSystemH5ProblemConfigDialog',
      components: { Loading,WangEditor },
      props: {
        visible: Boolean,
        id: String,
      },
      data() {
        return {
          title: '新建/编辑问题',
          dialogVisible: false, //导入失败弹窗
          loading: false,
          AgreeLoading: false, //按钮loading
          labelWidth: '100px',
          ruleForm: {
            name: '', //分类名称
            sort: 9999, //排序
            img:'',//分类图片
          },
        };
      },
      created() {
        if (this.id != '' && this.id != null) {
            this.getInfo()
        }
      },
      methods: {
        getPictureList(e) { //图片
        if (e != '') {
          this.ruleForm.img = e
          // this.$refs['ruleForm'].clearValidate(['pictureList']);
        } else {
          this.ruleForm.img = ''
        }
      },
        //取消
        handleClose() {
          this.$emit("update:visible", false);
        },
        // 富文本框设置
        useDetailChange(e){
            if(e != ''){
              // this.$refs.ruleForm.clearValidate(['commodityList.'+index+'.useDetail']);
            }
        },
        getInfo() { //获取信息详情
          this.loading = true
          questionTypeInfo(this.id).then((res) => {
              this.loading = false
              let info = res.result
              this.ruleForm.name = info.name
              this.ruleForm.adType = info.adType
              this.ruleForm.img = info.img
            })
            .finally(() => {
              this.loading = false;
            });
        },
        submitForm() {
            console.log(this.ruleForm.adType)
          //通知状态 1草稿 2已通知
            if (this.ruleForm.name == '') {
                this.$message.error('请输入分类名称');
                return
            } else if (this.ruleForm.img == '') {
                this.$message.error('请上传分类图标');
                return
            } else if (this.ruleForm.sort == '') {
                this.$message.error('排序号不能为空');
                return
            }
            if (this.id != '' && this.id != null) {
                this.editForm()
            } else {
                 this.addForm()
            }
        },
        addForm() {
          this.AgreeLoading = true
          var params = {
            ...this.ruleForm
          };
          addQuestionType(params).then((res) => {
              this.$message({
                message: "保存成功",
                type: "success",
              });
              setTimeout(() => {
                this.$emit('success')
                this.handleClose()
                this.AgreeLoading = false
              }, 1000);
            })
            .finally(() => {
              this.AgreeLoading = false;
            });
        },

        editForm(status) {
          this.AgreeLoading = true
          var params = {
            id: this.id,
            ...this.ruleForm
          };
          updateQuestionType(params).then((res) => {
              this.$message({
                message: "修改成功",
                type: "success",
              });
              setTimeout(() => {
                this.$emit('success')
                this.AgreeLoading = false
                this.handleClose()
              }, 1000);
            })
            .finally(() => {
              this.AgreeLoading = false;
            });
        },
      },
    };
  
  </script>
  <style lang="scss" scoped>
    .ex-diolog {
      ::v-deep .ex--dialog--footer {
        border: none !important;
        padding: 0 !important;
      }
  
      ::v-deep .ex--dialog--main {
        padding: 10px 20px !important;
      }
      .el-select,.el-input{
        width: 300px;
      }
    }
    .button_box {
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 20px 0;
    }
  
    ::v-deep input::-webkit-outer-spin-button,
    ::v-deep input::-webkit-inner-spin-button {
      -webkit-appearance: none !important;
    }
    ::v-deep input[type='number'] {
      -moz-appearance: textfield !important;
    }

  </style>
  